<template>
  <div class="msg-item" ref="msg_item" v-if="isshow">
    <div class="msg" :send-type="data.send_type" v-if="'subscribe unsubscribe news mpnews'.indexOf(data.type) == -1">
      <div class="header">
        <b v-if="data.send_type == 1001" :style="'background:url('+user.headimgurl+');'"></b>
        <!-- <b v-else :style="'background:url('+(csuser.header_url || kefupic)+');'"></b> -->
        <b v-else :style="'background:url('+( csuser.header_url ? $store.state.Config.web_url +csuser.header_url : kefupic )+');'"></b>
      </div>
      <div class="cont">
        <div class="info">
          <b class="name" v-if="data.send_type == 1001">{{user.nickname}}</b>
          <b class="name" v-else>{{csuser.nickname}}</b>
          <span class="time">{{data.send_time|formatDate}}</span>
        </div>
        <!-- 文本消息 -->
        <div class="content" :status="data.send_state" :type="data.type" v-if="data.type == 'text'" v-html="formatText(data.content)"></div>

        <!-- 图片消息 -->
        <div class="content" :status="data.send_state" :type="data.type" v-if="data.type == 'image'">
          <img v-if="data.oss_name" class="show_img_viewer" :src="$store.state.Config.base_url.split('/api')[0] + '/getOssFile?objname=' + data.oss_name" alt="">
          <img v-else class="show_img_viewer" :src="data.content|formatPicPath" alt="">
        </div>
        <!-- 视频消息 -->
        <div class="content" :status="data.send_state" :type="data.type" v-if="data.type == 'video'">
          <div class="video" @click="open($store.state.Config.web_url + strTojson(data.content).video)">
            <img :src="$store.state.Config.web_url + strTojson(data.content).thumb" alt="">
            <div class="play"><Icon type="ios-play" /></div>
          </div>
        </div>

        <!-- 语音消息 -->
        <div class="content" @click="playVoice" :status="data.send_state" :type="data.type" v-if="data.type == 'voice'">
          <div class="voice" :type="data.send_type">
            <Icon :class="{play:voicestatus}" type="logo-rss" />
          </div>
        </div>
      </div>
    </div>
    <div class="msg tips" v-else-if="data.type == 'subscribe'">
        <span>{{data.send_time|formatDate}}，新用户关注</span>
    </div>
    <div class="msg tips" v-else-if="data.type == 'unsubscribe'">
        <span>{{data.send_time|formatDate}}，用户<b class="red">取消关注</b></span>
    </div>
    <div class="msg mpnews" v-else-if="data.type == 'mpnews'">
        <div @click="open(item.url)" :class="{after:index == strTojson(data.content).length-1}" class="news_item first" v-for="(item, index) in strTojson(data.content)" :key="index" v-if="index == 0">
          <div class="top1">
             <img :src="item.thumb_url" alt="">
             <p>{{item.title}}</p>
           </div>
           <div v-if="strTojson(data.content).length == 1" class="desc">{{item.digest}}</div>
        </div>
        <div @click="open(item.url)" class="news_item" v-else>
           <img :src="item.thumb_url" alt="">
            <p class="tit">{{item.title}}</p>
        </div>
    </div>
  </div>
</template>

<script>
var kefupic = require('../../assets/images/timg.jpg')

export default {
  name: 'msgItem',
  data: () => {
    return {
      kefupic: kefupic,
      voicestatus: false
    }
  },
  props: {
    isshow: {
      default: true
    },
    data: {
      default: null
    },
    user: {
      default: null
    },
    csuser: {
      default: null
    }
  },
  created () {
  },
  mounted () {
    var that = this
    var links
    try {
      links = this.$refs['msg_item'].getElementsByTagName('a')
    } catch (e) {
      console.log(e)
      links = []
    }
    for (var i = 0; i < links.length; i++) {
      links[i].onclick = function (e) {
        e.preventDefault()
        that.open(this.getAttribute('url'))
      }
    }
  },
  methods: {
    strTojson (str) {
      return JSON.parse(str)
    },
    formatText (value) {
      value = value.replace(/\n/g, '<br/>') // 替换回车为br标签
      value = value.replace(/ /g, '&nbsp;') // 替换空格为&nbsp;
      value = value.replace(/a&nbsp;href/g, 'a target="_blank" url')
      return value
    },
    open (link) {
      this.$electron.shell.openExternal(link)
      this.$electron.shell.beep()
    },
    playVoice () {
      var url = this.$store.state.Config.web_url + this.data.content
      var andioEl = document.getElementById('playVoice')
      if (andioEl) {
        document.getElementsByTagName('body')[0].removeChild(andioEl) // 音频元素存在就删除
      }
      andioEl = document.createElement('audio')
      andioEl.src = url
      andioEl.setAttribute('id', 'playVoice')
      andioEl.setAttribute('autoplay', 'true')
      document.getElementsByTagName('body')[0].appendChild(andioEl)
    }
  }
}
</script>

<style lang="less" scoped>
@import './style.less';
</style>
